<template>
    <div class="edit-content">
        <div class="edit-show" v-if="!userInfo.roleName.includes('管理员')" v-html="content"></div>
        <template v-else>
            <div class="editbtn">
            <el-button :loading="loading" type="primary" @click="save">保存</el-button>
        </div>
        <Edit v-model="content" />
        </template>
        
    </div>
</template>

<script>

import Edit from "./Edit.vue";
import { listApi, updateByIdApi } from "@/api/config";
export default {
    components: {
    Edit
},
    data() {
        return {
            content:'',
            id: null,
            userInfo: {},
            loading: false
        };
    },
    created() {
        this.init()
        const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {roleName: []}
        this.userInfo = userInfo
    },

    mounted() {

    },
    methods: {
        async init(){
            const res = await listApi()
            this.id = res.id
            this.content = res.value
        },
        async save(){
            this.loading = true
            const res = await updateByIdApi({id: this.id, value: this.content})
            this.loading = false
            console.log(this.content, 'content');
            this.$message({
              message: `保存成功!`,
              type: "success",
            });
            
        }

    },
}
</script>
<style lang='scss' scoped>
.edit-content{
    .edit-show{
        padding: 16px;
        margin: auto;
        width: 100%;
        height: 100%;
    }
    .editbtn{
    margin: 16px;
    display: flex;
    justify-content: flex-end;
}
}

</style>